<template>
    <div id="ad">
        <button @click="jump">跳过 {{ time }}</button>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const time = ref(3)
const timer = ref(null)

onMounted(() => {
    timer.value = setInterval(() => {
        time.value--
        if (time.value === 0) {
            router.replace('/home')
        }
    }, 1000)
})

const jump = () => {
    router.replace('/home')
}

onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<style lang="scss" scoped>
#ad {
    height: 100vh;
    width: 100vw;
    background: url('../assets/images/amdc.jpg') no-repeat;
    background-size: cover;

    button {
        float: right;
        margin: 5px;
    }
}
</style>